<template>
<div class="bodyy">
    <el-collapse accordion v-model="activeName">
        <el-collapse-item name="1">
        <template slot="title" >
            <div class="title">
                <img src="../../assets/1.svg" alt="">
                <span id="jbxx">基本信息</span>
            </div>
        </template>
        <div class="content">
            <el-descriptions :column="3"  border>
                <el-descriptions-item label="公司全称" span="3" label-class-name="my-label" content-class-name="my-content">{{gsjj.COMPANYNAME}}</el-descriptions-item>
                <el-descriptions-item label="所属行业" label-class-name="my-label" content-class-name="my-content">{{gsjj.INDUSTRY}}</el-descriptions-item>
                <el-descriptions-item label="统一社会信用代码" label-class-name="my-label" content-class-name="my-content">{{this.$route.params.scc}}</el-descriptions-item>
                <el-descriptions-item label="注册资本" label-class-name="my-label" content-class-name="my-content">{{gsjj.REGISTEREDCAPITAL}}</el-descriptions-item>
                <el-descriptions-item label="成立日期" label-class-name="my-label" content-class-name="my-content">{{gsjj.ISSUEDATEX}}</el-descriptions-item>
                <el-descriptions-item label="董事长" label-class-name="my-label" content-class-name="my-content">{{gsjj.CHAIRMANNAME}}</el-descriptions-item>
                <el-descriptions-item label="总经理" label-class-name="my-label" content-class-name="my-content">{{gsjj.GENERALMANAGER}}</el-descriptions-item>
                <el-descriptions-item label="上市日期" label-class-name="my-label" content-class-name="my-content">{{gsjj.LISTINGDATEX}}</el-descriptions-item>
                <el-descriptions-item label="员工人数" label-class-name="my-label" content-class-name="my-content">{{gsjj.EMPLOYEESNUM}}</el-descriptions-item>
                <el-descriptions-item label="法人代表" label-class-name="my-label" content-class-name="my-content">{{gsjj.LEGALNAME}}</el-descriptions-item>
                <el-descriptions-item label="注册地址"  label-class-name="my-label" content-class-name="my-content">{{gsjj.ADDRESS}}</el-descriptions-item>
                <el-descriptions-item label="控股股东" span="2" label-class-name="my-label" content-class-name="my-content">{{gsjj.CONTROLLINGSHAREHOLDER}}</el-descriptions-item>
                <el-descriptions-item label="主营业务"  label-class-name="my-label" content-class-name="my-content">{{gsjj.MAINBUSINESS}}</el-descriptions-item>
                <el-descriptions-item label="实际控股人" span="2" label-class-name="my-label" content-class-name="my-content">{{gsjj.FINALCONTROLLER}}</el-descriptions-item>

            </el-descriptions>
        </div>
        </el-collapse-item>
    </el-collapse>
</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name:'GSJJ',
    data(){
        return {
            activeName :'1'
        }
    },
    computed:{
        ...mapState({
            gsjj:state => state.stock.stockInfo['上市公司企业简介']
        })
    }
};
</script>

<style lang="less" scoped>
.bodyy {
    padding: 0 20px 20px 20px;
    background: #FFFFFF;
    border: 1px solid rgba(226,226,226,0.50);
    box-shadow: 0 4px 14px 0 rgba(209,225,242,0.46);
    border-radius: 2px;
}
.title {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    img {
        width: 30px;
        height: 30px;
    }
    span {
        font-size: 20px;
        margin-left: 12px;
    }
}
.content {
    width: 100%;
    // height: 264px;
    // border: 1px solid #E9ECF3;
    /deep/ .my-label {
        background: rgb(237,244,255);
        width: 10%;
    }
    /deep/ .my-content {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        padding: 12px 25px;
        width: 20%;
    }
}
/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
    border: 1px solid #E9ECF3;
}
//修改收缩框title的高度
/deep/ .el-collapse-item__header {
    height: 70px!important;
}

</style>